<template>
  <!-- 收货单页面-->
  <div>
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="关键词查询"
        @search="onSearch"
        @cancel="onCancel"
        shape="round"
      />
    </form>
    <!-- "全部","代发货","待收货","待评价"列表 -->
    <van-grid>
  <van-grid-item    v-for="(item,index) in gridList" :text="item" :key="index" :class="gir==index ? 'girp' :'' " v-model="gir" @click="itemGir(index)"/>
</van-grid>
<!-- 商品描述 -->
<div>
<van-cell is-link @click="showPopup">商品描述</van-cell>
<van-card
  desc="下单时间:"
  title="小狼公司物流单"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">下单人:</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">收货</van-button>
  </template>
</van-card>
</div>
   <div>
<van-cell is-link @click="showPopup">商品描述</van-cell>
<van-card
  desc="下单时间:"
  title="小狼公司物流单"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">下单人:</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">收货</van-button>
  </template>
</van-card>
</div>
<div>
<van-cell is-link @click="showPopup">商品描述</van-cell>
<van-card
  desc="下单时间:"
  title="小狼公司物流单"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">下单人:</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">收货</van-button>
  </template>
</van-card>
</div>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      value: "",//搜索框输出的内容
      gridList:["全部","待发货","待收货","待评价"],//渲染列表数据局
      gir:1,//控制样式
      show: false,
    };
  },
  methods: {
    itemGir(val){
        this.gir=val
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    showPopup(){

    },
      showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.girp{
    border-bottom: 2px solid orange;
}
.van-card__content{
    text-align: left
}
.van-card__desc{
    margin: .85rem 0;
}
.van-card__header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-bottom: .8rem;
    /* border: 1px solid; */
    border-bottom: 1px dashed #5555;
}
.van-card__footer {
   display: block;
    width: 4.8rem;
    height: 2.4rem;
    text-align: center;
    background: blue;
    line-height: 2.4rem;
    border-radius: 1.25rem;
    /* margin: 0 auto; */
    position: relative;
    left: 16.5rem;
    color: white;
    font-weight: bold;
}

</style>